<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
          rel="stylesheet">
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
          rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bkclouds.cc/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bkclouds.cc/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="https://magicbox.bkclouds.cc/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="bg-white" data-bg-color="bg-white">
<div class="king-page-box">
    <div class="king-layout1-header">
        <nav class="">
            <div style="overflow:hidden; z-index: inherit;" class="navbar king-horizontal-nav1  f14">
                <div class="navbar-container">
                    <div class="navbar-header pull-left">
                        <a class="navbar-brand" href="javascript:;">
                            <img src="https://magicbox.bkclouds.cc/static_api/v3/bk/images/logo.png" class="logo"> </a>
                    </div>
                    <ul class="nav navbar-nav pull-left m0">
                        <li class="active"><a href="javascript:void(0);">首页</a></li>
                    </ul>
                    <div class="navbar-header pull-right">
                        <ul class="nav">
                            <li class="user-info">
                                <a href="javascript:;">
                                    <img class="img-rounded"
                                         src="https://magicbox.bkclouds.cc/static_api/v3/components/horizontal_nav1/images/avatar.png">
                                    <span>admin</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div class="king-layout1-main clearfix">
        <!-- sidebar start -->
        <div class="king-layout1-sidebar" style="width:216px;">
            <nav style="height:100%;" class="   f14">
                <div class="king-vertical-nav4">
                    <div class="sidebar-inner">
                        <ul class="navi">
                            <li class="has_submenu current open active c-open">
                                <a href="javascript:void(0);"> <i class="fa fa-gear "> </i>
                                    <span>首页</span>
                                    <span class="pull-right"><i class="fa fa-angle-down"></i></span>
                                </a>
                                <ul class="sub-menu" style="display: block;">
                                    <li><a href="javascript:void(0);">页面列表<i class="fa fa-chevron-right pull-right"></i></a>
                                    </li>
                                    <li><a data-toggle="modal" data-target="#add">新建页面<i
                                            class="fa fa-chevron-right pull-right"></i></a></li>
                                    <!-- Button trigger modal -->
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <!-- sidebar end -->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" id="add"
             aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <form action="/add" method="post">
                        <tr>
                            <th>网站名称<input type="text" name="nname" style="margin-left: 10px; width:200px;"></th>
                            </br>
                            <th>访问地址<input type="text" name="nurl" style="margin-left: 10px; width:200px;"></th>
                            </br>
                            <th><input type="submit" value="增加"></th>
                            </br>
                        </tr>
                    </form>
                </div>
            </div>
        </div>


        <!-- content start -->
        <div class="king-content-wrap">
            <div class="king-layout1-content" style="margin-left: 216px;">
                <table class="table mb0 pr15 ranger-box2  ">
                    <thead>
                    <tr>
                        <th style="width: 70px;">#</th>
                        <th style="width: 15%;">网站名称</th>
                        <th style="width: 15%;">访问地址</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    % for m in managers :
                    <tr>

                        <td style="width: 70px;">${managers.index(m)+1}</td>
                        <td style="width: 15%;">
                            <a href="http://dev.bking.com:8000/proxy/${m['id']}/">${m['pname']}</a>
                        </td>
                        <td style="width: 15%;">${m['purl']}</td>
                        <td>
                            <button class="btn btn-xs btn-warning" myvalue="${m['id']}" data-toggle="modal"
                                    data-target="#edit" onclick="edit_url(this)"><i class="glyphicon glyphicon-edit"></i></a> </button>
                            <button class="btn btn-xs btn-danger"><a href="/del/${m['id']}"><i
                                    class="glyphicon glyphicon-remove"></i> </a></button>
                        </td>
                    </tr>
                    % endfor
                    </tbody>
                </table>
                <div id="edit" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
                     aria-labelledby="mySmallModalLabel" style="height: ">
                    <div class="modal-dialog modal-sm" role="document">
                        <div class="modal-content">
                            <form action="/edit/" method="post" id="form_edit">
                                    网站名称<input type="text" name="nname" id="nname" style="margin-left: 10px;width:200px;">
                                    </br>
                                    访问地址<input type="text" name="nurl" id="nurl" style="margin-left: 10px;width:200px;">
                                    </br>
                                    <input type="submit" value="保存">
                                    </br>
                                </tr>
                            </form>
                        </div>
                    </div>
                </div>
                <template id="header_tpl_15020886936542">
                    <tr>
                        <th style="width: 70px;">#index#</th>
                        <th style="width: 15%;">#name#</th>
                        <th style="width: 15%;">#position#</th>
                        <th style="width: 15%;">#date#</th>
                        <th style="width: 15%;">#type#</th>
                        <th>操作</th>
                    </tr>
                </template>
                <template id="tpl_15020886936542">
                    <tr>
                        <td style="width: 70px;">#index#</td>
                        <td style="width: 15%;">#name#</td>
                        <td style="width: 15%;">#position#</td>
                        <td style="width: 15%;">#date#</td>
                        <td style="width: 15%;">#type#</td>
                        <td>
                            <button class="btn btn-xs btn-success"><i class="glyphicon glyphicon-ok"></i></button>
                            <button class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-edit"></i></button>
                            <button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
                        </td>
                    </tr>
                </template>
                <!-- 设置面板End -->
            </div>
        </div>
        <!-- content end -->
    </div>
</div>
<script>
    $(function () {
        var li = $('.navi li');
        li.each(function () {
            $(this).click(function () {
                if ($(this).hasClass('c-open')) {
                    $(this).find('ul').slideUp(350);
                    $(this).removeClass('c-open');
                } else {
                    $(this).find('ul').slideDown(350);
                    $(this).addClass('c-open');
                }
            })
        });
    })
</script>
<script>
    $(function () {
        function renderTpl(str, cfg) {
            var re = /(#(.+?)#)/g;

            return str.replace(re, function () {
                var val = cfg[arguments[2]] + '';
                if (typeof val == 'undefined') {
                    val = '';
                }
                return val;
            });

        }
    })
</script>
<script>
    $(document).ready(function () {
        $("#edit").modal("hide");
    })

    function edit_url(srcTag) {
        var examId = $(srcTag).attr('myvalue');
        var fatherTr = $(srcTag).parents("tr");
        var pname = $(fatherTr).children("td:eq(1)").children("a").text();
        var purl = $(fatherTr).children("td:eq(2)").text();
        $("#nname").val(pname);
        $("#nurl").val(purl);
        $("#form_edit").attr("action", "/edit/" + examId+"/");
    }
</script>

</body>
<script src="${STATIC_URL}js/settings.js?v=${STATIC_VERSION}" type="text/javascript"></script>

</html>
